<template>
	<view class="main">
		<view class="header">
			<view class="tit">排行榜</view>
			<view class="sele" @tap="show1 = true">
				<view class="in">
					<span>{{seleName}}</span>
					<image src="@/static/img/wright.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="myInfo">
				<view class="num">{{info.rank}}</view>
				<view class="info">
					<view class="name">{{info.name}}</view>
				</view>
				<view class="right">
					<view>{{info.total}}</view>
				</view>
			</view>
			<ul class="list">
				<li>
					<view class="msg one">排名</view>
					<view class="msg two">部门</view>
					<view class="msg for">盈利</view>
				</li>
				<li v-for="(item, index) in list" :key="index">
					<view class="one son">
						<image v-if="index == 0" src="@/static/img/image1.png" mode=""></image>
						<image v-else-if="index == 1" src="@/static/img/image2.png" mode=""></image>
						<image v-else-if="index == 2" src="@/static/img/image3.png" mode=""></image>
						<span v-else>{{ index + 1 }}</span>
					</view>
					<view class="two son">{{item.name}}</view>
					<view class="for son">{{item.total}}</view>
				</li>
			</ul>
		</view>
		<u-picker :show="show1" :columns="columns" @cancel="show1 = false" @close="show1 = false"
			:closeOnClickOverlay="true" keyName="name" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		rankLists,
		innerinfo,
		teamRanks
	} from '@/api/inner.js'
	export default {
		data() {
			return {
				show1: false,
				columns: [
					[{
						name: '今日',
						id: 1
					}, {
						name: '本周',
						id: 2
					}]
				],
				list: [],
				info: {},
				datetype: 1,
				userInfo: {},
				seleName:'今日'
			};
		},
		onLoad() {
			this.getRank()
		},
		methods: {
			async getRank() {
				let res = await teamRanks({
					date_type: this.datetype
				})
				this.info = res.data.info
				this.list = res.data.list
			},
			confirm(e) {
				this.datetype = e.value[0].id
				this.seleName = e.value[0].name
				this.getRank()
				this.show1 = false
			}
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		min-height: calc(100vh - 44px);
		background-image: url('@/static/img/rankBg1.png');
		background-repeat: no-repeat;
		background-position: top -44px;
		background-size: 100% 288px;
		display: flex;
		flex-direction: column;

		/deep/.u-popup__content {
			border-radius: 20px;
		}

		.header {
			padding: 120px 20px 10px;

			.tit {
				font-size: 48px;
				font-weight: 700;
				font-style: oblique;
				background: linear-gradient(90deg, #fff6e9 0%, #fff7d7 100%);
				-webkit-background-clip: text;
				/*将设置的背景颜色限制在文字中*/
				-webkit-text-fill-color: transparent;
				/*给文字设置成透明*/
				margin-bottom: 20px;
			}

			.sele {
				display: flex;

				.in {
					display: flex;
					align-items: center;
					padding: 8px 10px;
					color: #fff;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 1000px;
					border: 1px solid rgba(255, 255, 255, 0.15);
					font-size: 12px;

					image {
						width: 14px;
						height: 14px;
						margin-left: 5px;
					}
				}
			}
		}

		.listBox {
			flex: 1;
			background-color: #fff;
			border-radius: 20px 20px 0 0;
			padding: 15px 10px;

			.myInfo {
				background: #ffffff;
				box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.05);
				border-radius: 5px;
				padding: 10px 15px;
				display: flex;
				align-items: center;

				.num {
					font-size: 14px;
					color: #097ff6;
				}

				.info {
					display: flex;
					align-items: center;
					margin-left: 20px;
					flex: 1;

					image {
						width: 40px;
						height: 40px;
						border-radius: 100px;
						margin-right: 8px;
					}

					.name {
						font-size: 14px;
						color: #232323;
					}
				}

				.right {
					display: flex;
					align-items: center;

					.hr {
						width: 1px;
						height: 30px;
						background-color: #e5e5e5;
						margin: 0 8px;
					}
				}
			}

			.list {
				padding: 15px 10px 0;

				li {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					color: #3d3d3d;
					padding: 15px 0;

					.msg {
						width: 25%;
						color: #a4a5a9;
					}

					.son {
						width: 25%;
					}

					.one {
						text-align: left;
						color: #a4a5a9;

						image {
							width: 30px;
							height: 30px;
						}
					}
					.for{
						text-align: center;
					}
				}

				li:first-child {
					padding: 0;
				}
			}
		}
	}
</style>